<template>
    <div class="rs-popover">
        <div class="rs-popover-cont">
            <div class="rs-popover-title">
                <p>{{titles[settingInfo.typeStatus-1]}}</p>
                <span @click="cancel"></span>
            </div>
            <div class="rs-content">
                <div class="error-text" v-if="isReview">*职称开始评审后，不可修改</div>
                <div class="content-form">
                    <div class="minTitle">
                        <div class="flag"></div>
                        <div class="text">{{rounds}}</div>
                    </div>
                    <el-form :model="formQuery"
                             :rules="formRules"
                             label-width="85px"
                             ref="ruleForm"
                             :disabled="isReview"
                             class="el-form-box">
                        <div>
                            <el-form-item label="开始时间:" prop="startTime">
                                <el-date-picker
                                        v-model="formQuery.startTime"
                                        type="datetime"
                                        value-format="yyyy-MM-dd HH:mm"
                                        :picker-options="pickerOptions"
                                        size="mini"
                                        placeholder="选择开始时间">
                                </el-date-picker>
                            </el-form-item>
                            <el-form-item label="结束时间:" prop="endTime">
                                <el-date-picker
                                        v-model="formQuery.endTime"
                                        type="datetime"
                                        size="mini"
                                        value-format="yyyy-MM-dd HH:mm"
                                        :picker-options="pickerOptions"
                                        placeholder="选择结束时间">
                                </el-date-picker>
                            </el-form-item>
                        </div>
                        <div>
                            <el-form-item label="限投票数:" prop="expertsNum">
                                <el-input style="width: 200px" size="mini" min="1" max="20" type="text"
                                          v-model="formQuery.expertsNum"></el-input>
                            </el-form-item>
<!--                            <el-form-item label="晋升名额:" prop="promotionQuota">-->
<!--                                <el-input style="width: 200px" size="mini" min="1" max="20" type="number"-->
<!--                                          v-model="formQuery.promotionQuota"></el-input>-->
<!--                            </el-form-item>-->
                        </div>
                    </el-form>
                    <div class="el-transfer-box">
                        <label>专家：</label>
                        <el-transfer v-model="experts"
                                     :data="expertsData"
                                     :props="{
                                          key: 'id',
                                          label: 'name'
                                        }"
                                     :titles="['全选（备选）', '全选（已选）']">
                        </el-transfer>
                    </div>
                    <div class="bottomOperation">
                        <el-button size="mini" @click="cancel()" round>取消</el-button>
                        <el-button :disabled="isReview" type="primary" size="mini" @click="commit()" round>确定</el-button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import Qs from 'qs'
    import {findExperts,addCfg,findCfgTime} from '@/service/api'
    export default {
        name: "rsPopover",
        data() {
            return {
                pickerOptions: {
                    disabledDate(time) {
                        return time.getTime() < Date.now()-8.64e7 ;//如果没有后面的-8.64e7就是不可以选择今天的
                    },
                    format:'HH:mm',
                    selectableRange:['0:00:00 - 23:59:59']
                    // selectableRange:
                    //     new Date(new Date().setHours(new Date().getHours() + 1)).format(
                    //         'hh'
                    //     ) + ':00:00 - 23:59:00'
                },
                experts: [],
                formQuery: {},
                expertsData: [],
                isReview: false,
                titles:['续任正高','晋升正高','续任副高','晋升副高','续任中职','晋升中职'],
                formRules: {
                    startTime: [{required: true, message: '请选择开始时间',}],
                    endTime: [{required: true, message: '请选择开始时间',}],
                    expertsNum: [{required: true, message: '请专家票数', }],
                    promotionQuota: [{ required: true, message: '晋升名额', }],
                }
            }
        },
        props:{
            settingInfo:Object
        },
        computed:{
            rounds: function () {
                return this.settingInfo.rounds == 1 ? '第一轮配置':'第二轮配置'
            }
        },
        created() {
            this.handleIsReviews();
            this.formQuery = this.settingInfo;
            if(this.formQuery.experts){
                this.experts = JSON.parse(this.formQuery.experts)
            }
            this.getAllExperts();
        },
        methods: {
            cancel() {
                this.$emit('update:showPopover',false)
            },
            commit() {
                this.$refs.ruleForm.validate((valid) => {
                    if (valid) {
                        if(new Date(this.formQuery.startTime) >= new Date(this.formQuery.endTime)){
                            this.$message.error('结束时间不能小于开始时间');
                            return false;
                        }
                        if(this.experts.length == 0){
                            this.$message.error('请先选择专家！');
                            return false;
                        }
                        this.commitGo()
                        // this.handleFindCfgTime(isSuccess=>{
                        //     console.log(isSuccess)
                        //     if(isSuccess == false){
                        //         this.$message.error('两次配置时间冲突，请修改！');
                        //     }else {
                        //         this.commitGo()
                        //     }
                        // })

                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            commitGo(){
                let params = this.formQuery;
                params.experts = JSON.stringify(this.experts);
                // console.log(Qs.stringify(params))
                addCfg(Qs.stringify(params)).then(res => {  //
                    if (res.code == 200) {
                        console.log(res)
                        this.$message({
                            message: '操作成功！',
                            type: 'success'
                        });
                        this.cancel();
                        this.$emit('commitPopover')
                    } else {
                        console.log(res)
                    }
                });
            },
            getAllExperts() {
                findExperts().then(res => {  //
                    if (res.code == 200) {
                        if(this.isReview){
                            res.data.forEach(item=>{
                                item.disabled = true;
                            });
                        }
                        this.expertsData = res.data
                    } else {
                        console.log(res)
                    }
                });
            },
            handleIsReviews() {
                if(this.settingInfo.startTime){
                    if(new Date(this.settingInfo.startTime)<new Date()){
                        this.isReview = true
                    }
                }
            },
            handleFindCfgTime(callback) {
                let params = {
                    rounds: this.settingInfo.rounds,
                    typeStatus: this.settingInfo.typeStatus,
                };
                findCfgTime(Qs.stringify(params)).then(res => {  //
                    if (res.code == 200) {
                        let hasTime;
                        if(res.data.startTime && this.settingInfo.rounds ==2){
                            hasTime = new Date(this.formQuery.startTime) > new Date(res.data.endTime)
                        }else if(res.data.startTime && this.settingInfo.rounds ==1){
                            hasTime = new Date(this.formQuery.endTime) < new Date(res.data.startTime)
                        }
                        callback(hasTime);
                    } else {
                        console.log(res)
                    }
                });
            }
        }
    }
</script>

<style scoped>
    .rs-popover {
        position: fixed;
        top: 0px;
        left: 0px;
        z-index: 2;
        height: 100%;
        width: 100%;
        background: rgba(0, 0, 0, 0.3);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .rs-popover-cont {
        background: white;
        /*width: 35%;*/
        min-width: 680px;
        font-size: 14px;
        box-shadow: 3px 1px 12px 1px #00000069;
        border-radius: 10px;
        padding-bottom: 30px;
        overflow-y: auto;
        position: relative;
    }

    .rs-popover-title {
        width: 100%;
        text-align: center;
        font-size: 24px;
        font-weight: bold;
        color: white;
        padding: 10px 0px;
        background: url('../../assets/reviews/icon_tu@2x.png') no-repeat;
        background-size: 100% 100%; /* 背景图完整覆盖容器，但宽高比例变了，图片变形。*/
    }

    .rs-popover-title > span {
        display: block;
        width: 20px;
        height: 20px;
        background: url("../../assets/reviews/icon_shanchu@2x.png") no-repeat;
        background-size: 100% 100%;
        position: absolute;
        right: 30px;
        top: 14px;
        cursor: pointer;
    }

    .minTitle {
        display: flex;
        flex-direction: row;
        align-items: center;
        background: #31478f0d;
        padding: 12px 0px;
        border-top: solid 1px #f3f3f3;
        position: relative;
    }

    .minTitle > .flag {
        width: 3px;
        background: #31478F;
        margin: auto 10px auto 36px;
        height: 18px;
    }

    .minTitle > .text {
        color: #31478F;
        font-weight: bold;
        font-size: 17px;
    }

    .error-text {
        font-size: 15px;
        font-weight: bold;
        color: #ED5765;
        margin: 12px 36px;
    }

    .el-form-box {
        width: 90.4%;
        margin-left: 22px;
        margin-top: 16px;
    }

    .el-form-box > div {
        display: flex;
        justify-content: space-between;
    }

    .el-form-box >>> .el-form-item {
        margin-bottom: 18px;
    }

    .el-form-box >>> .el-date-editor.el-input, .el-date-editor.el-input__inner {
        width: 200px;
    }

    .el-transfer-box {
        display: flex;
        width: 92%;
        margin-left: 22px;
        margin-top: 6px;
    }

    .el-transfer-box >>> .el-transfer__buttons {
        padding: 0 8px;
    }

    .el-transfer-box >>> button {
        width: 52px;
        height: 34px;
        padding: 0;
        box-sizing: border-box;
    }

    .el-transfer-box label {
        display: block;
        width: 85px;
        text-align: right;
    }
    .bottomOperation{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 40px;
    }
    .bottomOperation>button{
        padding: 8px 30px;
        margin: 0 30px;
    }
    /deep/ .el-checkbox__label{
        font-size: 14px !important;
    }
</style>
